<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./assets/plugins/jquery-3.4.1.js"></script>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>在线问答系统-关注</title>

    <!-- Bootstrap -->
    <link href="./assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="./assets/plugins/html5shiv.min.js"></script>
    <script src="./assets/plugins/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="./assets/style/common.css">
    <link rel="stylesheet" href="./assets/style/index.css">
</head>

<body class="layout" id="top">
<!-- 顶部导航 -->
<div class="layout-header">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#id-index-banner"
                        aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">在线问答系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="id-index-banner">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">话题</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索话题">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">提问</a></li>
                    <li><a href="#">消息<span class="badge">4</span></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">个人中心 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="../../accounts/templates/mine.html">我的主页</a></li>
                            <li><a href="../../accounts/templates/mine.html">设置</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<!-- // 顶部导航 -->

<div class="layout-main">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <!-- 消息通知区域 -->
                <div class="alert alert-warning alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <strong>你好，张三!</strong> 欢迎登陆在线问答系统
                </div>
                <!-- // 消息通知区域 -->
                <!-- banner图 -->
                <div id="id-index-banner" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                        </div>
                        <div class="item">
                            <img class="img-responsive" src="./assets/home/banner/banner1.jpg" alt="banner图">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#id-index-banner" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#id-index-banner" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!-- //banner图 -->
                <!-- 分类菜单 -->
                <div class="cls-menu-ls">
                    {#             使用了蓝图，就是蓝图.页面#}
                    <a href="{{ url_for('qa.index') }}">推荐</a>
                    <a href="{{ url_for('qa.follow') }}" class="active">关注</a>
                    <a href="#">热榜</a>
                </div>
                <!-- //分类菜单 -->
                <!-- 问题列表 -->
                <div class="qa-ls" id="id-qa-ls">

                    {#              通过for循环，循环获取的关注问题的对象，并引用起来#}
                    {#            {% for question in page_data.items %}#}
                    {#            <div class="qa-item">#}
                    {#            点击问题详情，进入到问题页详情#}
                    {#              <a href="{{ url_for('qa.detail',q_id=question.id) }}" class="title">{{ question.title }}</a>#}
                    {#              <div class="desc">#}
                    {#                  当有图片的时候，才把图片展示出来#}
                    {#                  {% if question.img %}#}
                    {#                <div class="left">#}
                    {#                  <img src="{{ question.get_img_url }}" alt="" srcset="">#}
                    {#                </div>#}
                    {#                  {% endif %}#}
                    {#                <div class="right">#}
                    {#                    使用过滤器，如果空值是真，才返回default的内容#}
                    {#                  <div class="show-desc">{{ question.desc|d('暂无内容',true) }}#}
                    {#                    <span class="more">阅读原文<i class="glyphicon glyphicon-menu-down"></i></span>#}
                    {#                  </div>#}
                    {#                  <div class="show-all hidden">#}
                    {#                      转义html的内容 #}
                    {#                      {% autoescape false %}#}
                    {#                      {{ question.content|safe }}#}
                    {#                      {% endautoescape %}#}
                    {#                    <span class="more">收起<i class="glyphicon glyphicon-menu-up"></i></span>#}
                    {#                  </div>#}
                    {#                </div>#}
                    {#              </div>#}
                    {#              <div class="qa-footer">#}
                    {#                <div>#}
                    {#                  <button type="button" class="btn btn-info btn-sm">关  注</button>#}
                    {#                </div>#}
                    {#                  通过数据库拿到评论的数据#}
                    {#                <div class="txt-menu"><i class="glyphicon glyphicon-comment"></i>{{ question.comment_count|d('0',true) }}</div>#}
                    {#                <div class="txt-menu"><i class="glyphicon glyphicon-send"></i>分享</div>#}
                    {#                <div class="txt-menu"><i class="glyphicon glyphicon-flag"></i>举报</div>#}
                    {#                <div class="txt-menu btn-group">#}
                    {#                  <i class="glyphicon glyphicon-option-horizontal dropdown-toggle" data-toggle="dropdown"#}
                    {#                    aria-haspopup="true" aria-expanded="false"></i>#}
                    {#                  <ul class="dropdown-menu">#}
                    {#                    <li><a href="#">不感兴趣</a></li>#}
                    {#                  </ul>#}
                    {#                </div>#}
                    {#              </div>#}
                    {#            </div>#}
                    {#            {% endfor %}#}
                </div>
                {#                添加更多的按钮  #}
                <div type="button" id="id-load-more">加载更多</div>
            </div>
            <div class="col-md-3">
                <!-- 右侧菜单 -->
                <div class="right-menu-box box-wrap">
                    <a href="#" class="menu-item">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>写回答</span>
                    </a>
                    <a href="write.html" class="menu-item">
                        <i class="glyphicon glyphicon-pencil"></i>
                        <span>写文章</span>
                    </a>
                    <a href="#" class="menu-item">
                        <i class="glyphicon glyphicon-ok"></i>
                        <span>些想法</span>
                    </a>
                    <a href="#" class="menu-item">
                        <i class="glyphicon glyphicon-play-circle"></i>
                        <span>发视频</span>
                    </a>
                    <a href="#" class="menu-item">
                        <i class="glyphicon glyphicon-adjust"></i>
                        <span>稍后答</span>
                    </a>
                    <a href="#" class="menu-item">
                        <i class="glyphicon glyphicon-file"></i>
                        <span>草稿箱</span>
                    </a>
                </div>
                <!-- 创作者入口 -->
                <div class="right-creater-box box-wrap">
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-user"></i>
                            <span>草稿箱</span>
                        </div>
                        <div class="right">
                            <span>去开通</span>
                            <i class="glyphicon glyphicon-menu-right"></i>
                        </div>
                    </a>
                </div>
                <!-- 彩色菜单入口 -->
                <div class="right-menu-box box-wrap">
                    <a href="#" class="menu-item menu-live">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Live</span>
                    </a>
                    <a href="#" class="menu-item menu-store">
                        <i class="glyphicon glyphicon-pencil"></i>
                        <span>书店</span>
                    </a>
                    <a href="#" class="menu-item menu-table">
                        <i class="glyphicon glyphicon-ok"></i>
                        <span>圆桌</span>
                    </a>
                    <a href="#" class="menu-item menu-special">
                        <i class="glyphicon glyphicon-play-circle"></i>
                        <span>专栏</span>
                    </a>
                    <a href="#" class="menu-item menu-consult">
                        <i class="glyphicon glyphicon-adjust"></i>
                        <span>付费咨询</span>
                    </a>
                    <a href="#" class="menu-item menu-wiki">
                        <i class="glyphicon glyphicon-file"></i>
                        <span>百科</span>
                    </a>
                </div>
                <!-- // 彩色菜单入口 -->
                <!-- 我的入口 -->
                <div class="right-mine-box box-wrap">
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-heart"></i>
                            <span>我的收藏</span>
                        </div>
                        <div class="right">
                            <span>0</span>
                        </div>
                    </a>
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-question-sign"></i>
                            <span>我关注的问题</span>
                        </div>
                        <div class="right">
                            <span>28</span>
                        </div>
                    </a>
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-user"></i>
                            <span>我的邀请</span>
                        </div>
                        <div class="right">
                            <span>33</span>
                        </div>
                    </a>
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>我的余额</span>
                        </div>
                        <div class="right">
                        </div>
                    </a>
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-king"></i>
                            <span>站务中心</span>
                        </div>
                        <div class="right">
                        </div>
                    </a>
                    <a href="#" class="menu-item">
                        <div class="left">
                            <i class="glyphicon glyphicon-file"></i>
                            <span>版权服务中心</span>
                        </div>
                        <div class="right">
                        </div>
                    </a>
                </div>
                <!-- //我的入口 -->
                <!-- 右侧页脚 -->
                <div class="right-footer">
                    <a href="#">用户指南</a><span class="dot">·</span>
                    <a href="#">用户使用协议</a><span class="dot">·</span>
                    <a href="#">用户隐私权政策</a>
                    <br/>
                    <a href="#">侵权举报</a><span class="dot">·</span>
                    <a href="#">网上有害信息举报专区</a>
                    <br/>
                    <a href="#">京ICP证 第10001000号</a>
                    <br/>
                    <a href="#">京ICP备 第10001000号</a>
                    <br/>
                    <a href="#">联系我们 &copy; 2020在线问答</a>
                </div>
                <!-- //右侧页脚 -->
            </div>
        </div>
    </div>
    <!-- // container -->
</div>
<div class="layout-footer">
    <a href="#" data-toggle="tooltip" title="意见反馈"><i class="glyphicon glyphicon-briefcase"></i></a>
    <a href="#top" data-toggle="tooltip" title="回到顶部"><i class="glyphicon glyphicon-arrow-up"></i></a>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./assets/plugins/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        // 页面右下角的菜单提示
        $('[data-toggle="tooltip"]').tooltip()
        // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
        $('.show-desc').click(function () {
            $(this).addClass('hidden');
            $(this).next().removeClass('hidden')
        })
        $('.show-all').click(function () {
            $(this).addClass('hidden');
            $(this).prev().removeClass('hidden')
        })
    })
    $(function () {
        console.log("111111")
        var page = 1
        var container = $('#id-qa-ls');
        $('#id-load-more').click(function () {
            $.get('{{ url_for("qa.question_list") }}', {
                    page: page
                },
                function (res) {
                    console.log(res);
                    {# 表示请求成功 #}
                    if (res.code === 0) {
                        // 绑定事件
                        // 1. 构建jq对象
                        var html = $(res.data)
                        // 2. 为对象里面的一些元素绑定事件
                        // 点击，查看更多，把详细的那个p标签展示出来，把自己隐藏
                        $('.show-desc', html).click(function () {
                            $(this).addClass('hidden');
                            $(this).next().removeClass('hidden')
                        })
                        $('.show-all', html).click(function () {
                            $(this).addClass('hidden');
                            $(this).prev().removeClass('hidden')
                        })
                        // 添加第一页的内容给到#id-qa-ls中
                        container.append(html)
                        page += 1
                    }else{
                        window.alert("接口请求失败")
                    }
                })
        })
    })
</script>

</body>
</html>
